<!-- 楼层管理 -->
<template>
  <div class="management-container">
    <BackgroundBox>
      <div class="select">
        <span>宿舍楼</span>
        <el-select
          v-model="dormitoryIdRef"
          placeholder="请选择宿舍楼"
          style="width: 240px"
        >
          <el-option
            v-for="item in props.dormitoryInfo"
            :key="item.id"
            :label="item.DormitoryName"
            :value="item.id"
          />
        </el-select>
      </div>
      <div class="btn">
        <el-button type="primary" @click="getDormitoryId">获取信息</el-button>
      </div>
    </BackgroundBox>
  </div>
</template>

<script setup>
import BackgroundBox from "@/components/BackgroundBox/index.vue";
import { ref } from "vue";
const props = defineProps({
    dormitoryInfo:{
        type:Array,
        required:true
    }
})
const dormitoryIdRef = ref("");
const emit = defineEmits(["getDormitoryId"])
const getDormitoryId = () =>{
    if(!dormitoryIdRef.value){
        ElMessage.error('请选择宿舍楼')
        return
    }
    emit("getDormitoryId",dormitoryIdRef.value)
}

</script>

<style lang="less" scoped>
.management-container {
  width: 100%;
  .back-container {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    height: 90px;
    line-height: 90px;
    span{
        margin-right:10px;
    }
  }
}
</style>